<template>
    <div>
        <h3>显示列表</h3>
        <div>
          
            门店名称<input type="text" v-model="info.shopName">
            开店时间<input type="date" v-model.trim="info.openTime1">-<input type="date" v-model.trim="info.openTime2">
            <input type="button" value="查询" class="btn btn-primary" @click="getShopList">
            <!-- <input type="button" value="重置" class="btn btn-warning" >//@click="reset" -->
        
        </div>
        <table class="table table-bordered">
            <tbody>
                <tr>
                    <td>序号</td>
                    <td>门店名称</td>
                    <td>分店名称</td>
                    <td>门店图片</td>
                    <td>门店状态</td>
                    <td>开业时间</td>
                    <td>门店地址</td>
                    <td>门店类型</td>
                    <td>特色</td>
                    <td>电话</td>
                    <td>操作</td>
                </tr>
                <tr v-for="item in data.list" :key="item.id">
                    <td>{{item.id}}</td>
                    <td>{{ item.shopName }}</td>
                    <td>{{ item.branchName }}</td>
                    <td>
                        <img :src="item.phone" width="50" height="50" >
                    </td>
                    <td>{{ item.state==true?'开启':'禁用' }}</td>
                    <td>{{ moment(item.beginTime).format('YYYY-MM-DD') }}</td>
                    <td>{{ item.shopAddrName }}</td>
                    <td>{{ item.shopType }}</td>
                    <td>{{ item.teSe }}</td>
                    <td>{{ item.tel }}</td>
                    <td><input type="button" value="修改" class="btn-btn-success"></td>
                    
                </tr>
            </tbody>
        </table>
        <!-- 分页 -->
        <div>
            <!-- 显示数据 -->
             <span>共{{ data.totalCount }}条</span>
             <span>每页{{ info.pageSize }}条</span>
             <span>当前{{ info.pageInde  }}/{{ data.totalPage }}</span>
            <!-- 改变页码 -->
             <input type="button" value="首页" @click="goPage(1)">
             <input type="button" value="上一页" @click="goPage(info.pageInde-1)">
             <!-- 循环总页数 number只能输入数字 -->
             <input type="button" :value="item" v-for="item in data.totalPage" @click="goPage(item)">
             <input type="button" value="下一页" @click="goPage(info.pageInde+1)">
             <input type="button" value="尾页" @click="goPage(data.totalPage)">
             <input type="number" v-model="info.pageInde">
             <input type="button" value="跳转" @click="goPage(info.pageInde)">
            <!-- 改变页容量 -->
             <select v-model="info.pageSize" @click="getShopList">
                <option :value="itme" v-for="itme in arr">每页{{ itme }}条</option>
             </select>

        </div>
    </div>
</template>

<script setup lang="ts">
import{ref,reactive,onMounted}from 'vue'
import axios from 'axios';
import moment from 'moment';
import{useRouter,useRoute} from 'vue-router'

const route=useRoute();
const router=useRouter();

//声明变量
let info:any=reactive({
    pageInde:1,//页码
    pageSize:2,//页容量
    shopName:'',
    openTime1:'',
    openTime2:'',


})
let data:any=reactive({
    list:[],//列表数据
    totalCount:0,//存储的总条数
    totalPage:0,//总页数
})
let arr :any =ref([2,4,6])
onMounted(()=>{
    getShopList();
})
//改变页码
const goPage=(num:any)=>{
    console.log('num',num);

    if(num<1){
        info.pageInde=1;
        return;
    }
    if(num>data.totalPage)
    {
        info.pageInde=data.totalPage;
        return;
    }
    info.pageInde=num;//改变页码的值
    getShopList();
}

const getShopList=()=>{
    axios({
        url:'/api/Shops/GetShopList',
        method:'get',
        params:info,
    }).then((res)=>{
        console.log(res);
        // data.list=res.data.list;
        // data.totalCount=res.data.totalCount;
        // data.totalPage=res.data.totalPage;

        Object.assign(data,res.data);
    })
}
</script>

<style scoped>

</style>